<template>
	<div class="dealDevice">
		<div class="search">
			<div class="mui-input-row">
				<label>扫码区域：</label>
				<div class="search-right">
					<input type="text" placeholder="请输入设备名称或编号" class="search-input" />
					<el-button type="primary">确定</el-button>
				</div>

			</div>
			<mt-radio v-model="value" class='search-radio' :options='options'>
			</mt-radio>
			
		</div>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="number">
						<span>设备编号</span>
						<span class="numberInfo">BL20180116001</span>
					</p>
					<p>
						<span>状态</span>
						<span>未处理</span>
					</p>
					<p>
						<span>异常类型</span>
						<span>0001</span>
					</p>
					<p>
						<span>问题描述</span>
						<span>坯不良</span>
					</p>
					<p>
						<span>反馈人</span>
						<span>管理员</span>
					</p>
					<p>
						<span>反馈时间</span>
						<span>2018-1-16 18:06:57</span>
					</p>
					<div class="deal" @click="goDealDevice">
						<p style="color: red;">我要处理</p>
					</div>
				</div>
			</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="number">
						<span>设备编号</span>
						<span class="numberInfo">BL20180116001</span>
					</p>
					<p>
						<span>状态</span>
						<span>已处理</span>
					</p>
					<p>
						<span>异常类型</span>
						<span>0001</span>
					</p>
					<p>
						<span>问题描述</span>
						<span>坯不良</span>
					</p>
					<p>
						<span>反馈人</span>
						<span>管理员</span>
					</p>
					<p>
						<span>反馈时间</span>
						<span>2018-1-16 18:06:57</span>
					</p>
					<p>
						<span>处理人</span>
						<span>saas07</span>
					</p>
					<p>
						<span>处理时间</span>
						<span>2018-1-16 18:06:57</span>
					</p>
					<p>
						<span>处理描述</span>
						<span>无</span>
					</p>
					<div class="deal" @click="goLookDeviceAbnormal">
						<p>我要查看</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				options: [
					{value:'0',
					label:'未处理'},
					{value:'1',
					label:'已处理'},
					{value:'2',
					label:'全部'
					}
				]
			}
		},
		methods: {
			goDealDevice() {
				this.$router.push({
					name: 'dealDeviceInfo'
				})
			},
			goLookDeviceAbnormal(){
				this.$router.push({name:'lookDeviceAbnormal'})
			}
		}
	}
</script>

<style scoped="scoped">
	.deal {
		padding-top: 20px;
		display: flex;
		justify-content: center;
		border-top: 1px solid #EEEEEE;
	}

	.deal p {
		font-size: 16px;
	}

	.deal:hover {
		background: #EEEEEE;
	}

	.detail {
		border-bottom: 1px #EEEEEE solid;
		padding-bottom: 3px;
	}

	.number {
		padding-bottom: 17px;
		border-bottom: 1px solid #EEEEEE;
	}

	.numberInfo {
		font-size: 18px;
		color: black;
		font-weight: 500;
	}

	.search-input {
		padding-left: 0;
		border: none;
		margin-bottom: 0;
		font-size: 16px;
	}

	.search {
		margin-top: 50px;
	}

	.mui-input-row {
		background: white;
	}

	.mui-input-row label {
		padding-right: 4px;
		font-size: 16px;
		width: 34%;
	}

	.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
		width: 66%;
	}

	.el-button {
		padding: 8px 16px;
		margin-bottom: 0px;
		height: 30px;
		margin-top: 5px;
		margin-right: 10px;
	}

	.search-right {
		display: flex;
		justify-content: space-between;
	}

	.search-radio {
		margin-top: -7px;
	}
	.mui-card {
		box-shadow: 0px 6px 8px #cdcdcd;
		margin-bottom: 17px;
	}

	.mui-card-content-inner {
		padding-bottom: 0px;
	}

	.mui-card-content-inner p {
		display: flex;
		justify-content: space-between;
	}
</style>
